<%-- 
    Document   : diet
    Created on : Feb 2, 2013, 11:40:30 PM
    Author     : Vrety
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Diet Page</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
       
        <script type="text/javascript" src="js/DietJS.js"></script>
        <script type="tetext/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            var xmlDoc = "";
            var xmlhttp;
            function loadXMLDoc(){
                xmlhttp = getXMLHttpRequest();
                xmlhttp.open("GET","xml/DietInfo.xml",false);
                xmlhttp.send();
                xmlDoc=xmlhttp.responseXML;
            }
            function deleteDietDetail(id){
                xmlhttp = getXMLHttpRequest();
                xmlhttp.open("GET", "ControllerServlet?btnAction=deleteDietDetail&dietDetailID="+ id, false);
                xmlhttp.send();
            }
            function startPage(){
                loadXMLDoc();

                var x = xmlDoc.getElementsByTagName("dietInfo");
                var dates = [];
                for (i=1 ;i<x.length;i++) {
                    var dateTime = x[i].getElementsByTagName("datetime")[0].childNodes[0].nodeValue,
                        time = x[i].getElementsByTagName("time")[0].childNodes[0].nodeValue,
                        dishName = x[i].getElementsByTagName("dishName")[0].childNodes[0].nodeValue,
                        calories = x[i].getElementsByTagName("calories")[0].childNodes[0].nodeValue,
                        imageUrl = x[i].getElementsByTagName("imageURL")[0].childNodes[0].nodeValue,
                        dietDetailID = x[i].getElementsByTagName("dietDetailID")[0].childNodes[0].nodeValue;

                        if (typeof(dates[dateTime]) === 'undefined') {
                            dates[dateTime] = [];
                        }

                        if (typeof(dates[dateTime][time]) === 'undefined') {
                            dates[dateTime][time] = [];
                        }

                        dates[dateTime][time].push({
                            dietDetailID: dietDetailID,
                            dishName: dishName,
                            calories: calories,
                            imageUrl: imageUrl
                        });
                }
                console.log(dates);

                for (var date in dates) {
                    document.write("</br>");
                    document.write("<div align=center>");
                    var dat = date.substr(0, 10);
                    document.write("<h2>" + dat + "</h2>");
                    document.write("</div>");
                    document.write("</br>");
                    document.write("<div>");
                    document.write("<table border='1' align=center >");
                    document.write("<tr>");
                    document.write("<th width=100>");
                    document.write("</th>");
                    document.write("<th width=500> ");
                    document.write("Tên món an");
                    document.write("</th>");
                    document.write("<th width=130>");
                    document.write("Lượng Calories");
                    document.write("</th>");
                    document.write("<th width=100>");
                    document.write("Hình ảnh");
                    document.write("</th>");
                    document.write("<th>");
                    document.write("</th>");
                    document.write("</tr>");
                    for (var time in dates[date]) {
                        for (var i = 0; i < dates[date][time].length; i++) {
                            document.write("<tr id='tr-" + dates[date][time][i].dietDetailID +"'>");

                            if (i == 0) {
                                document.write("<td style='border-bottom: none'>");
                                document.write(time);
                                
                                document.write("<a href='javascript:void(0);' onclick=\"addMenu('" + date + "', '" + time + "')\"><i class='icon-plus-sign'></i></a>");
                                document.write("</td>");

                            } else {
                                document.write("<td style='border-top:none;border-bottom: none'>");
                                document.write("</td>");
                            }

                            document.write("<td>");
                            document.write(dates[date][time][i].dishName + " ");
                            document.write("</td>");
                            document.write("<td>");
                            document.write(dates[date][time][i].calories + " ");
                            document.write("</td>")
                            document.write("<td>");
                            document.write("<img class='img-rounded' height='100' width='100' src='http://" + document.location.host + "/DietPlanning/images/dish/" + dates[date][time][i].imageUrl + "' />");
                            document.write("</td>");
                            document.write("<td>");
                            document.write("<a href='javascript:void(0);' id='" + dates[date][time][i].dietDetailID + "' onclick='deleteMenu(this.id)'><i class='icon-remove'></i></a>");
                            document.write("</td>");
                            document.write("</tr>");
                        }


                    }
                    document.write("</table>");                    
                    document.write("</div>")
                }

            }

            function deleteMenu (id) {
                if (confirm("Do you want to delete this?")) {
                    deleteDietDetail(id);
                    loadXMLDoc();
                    var tr = document.getElementById("tr-" + id);
                    tr.style.display = "none";
                }
            }
            function addMenu(date, time){
                window.open("addDishToMenu.jsp?date=" + date +"&time=" + time, '_blank');
                window.focus();
                
            }
        </script>

    </head>
    <body >
        <div>
            <jsp:include page="homeHeader.jsp"/>
            <br/>
            <form action="ControllerServlet" >
                <input type="submit" class="btn btn-success" name="btnAction" value="Tạo thực đơn mới" >
            </form>
            
        </div>
        <script type="text/javascript" >
            window.onload = startPage();
        </script>

    </body>
</html>
